<template>
  <view class="tradeOrderDetail">
    <pagehead>交易详情</pagehead>
    <view class="top">
      <view class="p">交易详情</view>
      <view class="num">{{detail.amt}}<text class="unit">元</text></view>
      <view class="txt">{{ getType(detail.app_type) }}</view>
    </view>
    <view class="content">
      <view class="info">
        <view class="label">商户名称</view>
        <view class="des">{{ detail.merchant_name }}</view>
      </view>
      <view class="info">
        <view class="label">交易单号</view>
        <view class="des">{{ detail.id_txn_ctrl }}</view>
      </view>
      <view class="info">
        <view class="label">卡类型</view>
        <view class="des">{{ detail.card_type=='0001'?'贷记卡':'借记卡' }}</view>
      </view>
      <view class="info">
        <view class="label">交易类型</view>
        <view class="des">{{ detail.trade_type=='1'?'刷卡支付':'扫码支付' }}</view>
      </view>
      <view class="info">
        <view class="label">交易金额</view>
        <view class="des">{{ detail.amt }}</view>
      </view>
      <view class="info">
        <view class="label">支付方式</view>
        <view class="des">{{ getType(detail.app_type) }}</view>
      </view>
      <view class="info">
        <view class="label">交易时间</view>
        <view class="des">{{ detail.txn_time }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tradeId: '',
      detail: { id: 1, name: '', phone: '' }
    };
  },
  computed:{
    getType(){
      // WECHAT：（微信BSC）WECHATCSB:（微信CSB）WECHATOA：（微信）ALIPAY:（支付宝BSC）ALIPAYCSB:（支付宝CSB）CUPCSB:（银联CSB）CUPBSC:（银联BSC）CP:（刷卡）
				return function(type){
					switch (type){
						case 'WECHAT':
							return '微信BSC';
							break;
						case 'WECHATCSB':
							return '微信CSB';
							break;
						case 'ALIPAY':
							return '支付宝BSC';
							break;
						case 'ALIPAYCSB':
							return '支付宝CS ';
							break;
						case 'CUPCSB':
							return '银联CSB';
							break;
						case 'CUPBSC':
							return '银联BSC';
							break;
						case 'CP':
							return '刷卡';
							break;
					}
				}
      }
	},
  onLoad(options) {
    if (options) {
      this.tradeId = options.value1
      this.getOrderDetail()
    }
  },
  methods: {
    // 订单详情
    getOrderDetail() {
      var data = {
        trade_id: this.tradeId,
      };
      console.log("data：", data);
      uni.showLoading({
        mask: true
      })
      this.$Ajax('/api/user/trade/getUserTradeDetail', data, res => {
        uni.hideLoading();
        this.detail = res.data.userTradeDetail;
        console.log('detail', this.detail)
      }, err => {
        uni.hideLoading();
      }
      )
    },
  },
};
</script>

<style lang="scss" scoped>
.tradeOrderDetail {
  height: 100vh;
  background: #fff;

  .top {
    padding-top: 48rpx;
    padding-bottom: 32rpx;
    border-bottom: 1px solid #eee;
    text-align: center;
    color: #333;

    .p {
      font-size: 24rpx;
      font-weight: 500;
    }

    .num {
      font-size: 36rpx;
      font-weight: 500;
      margin-top: 20rpx;
    }

    .unit {
      font-size: 24rpx;
      font-weight: normal;
    }

    .txt {
      font-size: 20rpx;
      color: #666;
      margin-top: 20rpx;
    }
  }

  .info {
    @include flexBetween;
    padding: 0 28rpx;
    margin-top: 32rpx;

    .label {
      font-size: 28rpx;
      color: #999999;
    }

    .des {
      font-size: 24rpx;
    }
  }
}
</style>
